<template>
  <view>
    <view v-show="!showAddress" class="flex flex-column justify-center" style="height: 50vh;">
      <u-empty text="没有地址哦~ 快去添加吧"></u-empty>
    </view>

    <u-radio-group v-model="radioNormal" placement="column">
      <view class="bg-white rounded-lg m-2 p-2" v-for="(item, index) in addressInfoList" :key="index">
        <view class="flex justify-between align-center">
          <view class="flex flex-column justify-between">
            <text class="font-sm">{{ item.city }}</text>
            <text class="font-md font-weight-bold pt-2">{{ item.location+item.buildingNo }}</text>
            <text class="font-sm pt-2">{{item.contacts}}（{{item.phone}}）</text>
          </view>
          <u-icon name="edit-pen-fill" size="25" @click="toEditAddress(item)"></u-icon>
        </view>
        <view class="border-top mt-3 pt-3 flex justify-between align-center">
          <view class="text-muted">

            <u-radio label="当前默认" name="当前默认">
            </u-radio>

          </view>
          <text class="text-muted" @click="deleteAddress">删除</text>
        </view>
      </view>
    </u-radio-group>
    <!--    底部固定按钮-->
    <view v-show="showAddress" class="mx-2 mb-3 position-fixed left-0 right-0 bottom-0">
      <u-button type="primary" shape="circle" @click="toAddAddress">新增地址</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAddress: true,
      radioNormal: '当前默认',
      addressInfoList: [
        {
          // 城市
          city: '成都市',
          // 具体位置
          location: '四川省成都市成华区11:11(成都万象城店)',
          // 楼号
          buildingNo: '1楼',
          // 联系人
          contacts: '吴某人',
          // 号码
          phone: '153****3517'
        },
      ],
    };
  },
  methods: {
    toAddAddress() {
      uni.navigateTo({
        url: '/pages/users/add_address/add_address'
      })
    },
    toEditAddress() {
      uni.navigateTo({
        url: `/pages/users/add_address/add_address?id=${1}`
      })
    },
    deleteAddress() {
      console.log('删除')
    },
  },
}
</script>

<style lang="scss">
page {
  background: #f5f5f7;
}
</style>
